<template>
    <div>
        <el-container>
            <el-header height="130px">
                <home-header></home-header>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <home-left></home-left>
                </el-aside>
                <el-main>
                    <div v-if="show">
                        <home-current></home-current>
                    </div>
                    <router-view v-else></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import HomeHeader from "@/components/home/HomeHeader";
import HomeLeft from "@/components/home/HomeLeft";
import HomeCurrent from "@/components/home/HomeCurrent";
export default {
    mounted() {
        this.showHome(this.$route);
    },
    data() {
        return {
            show: false,
        };
    },
    methods: {
        showHome(value) {
            if (value.path === "/home") {
                this.show = true;
            } else {
                this.show = false;
            }
        },
    },
    components: {
        HomeHeader,
        HomeLeft,
        HomeCurrent,
    },
    watch: {
        $route(value) {
            // console.log(value);
            this.showHome(value);
        },
    },
};
</script>

<style lang="scss" scoped>
div {
    .el-container {
        background-color: #b3c0d1;

        .el-container {
            .el-aside {
                // background-color: #545c64;
                // background-color: #4644ec;
                background-color: #d3d9e2;
            }

            .el-main {
                background-color: #e9eef3;
            }
        }
    }
}
</style>